<template>
  <div class="my-show-container">
    <h2 class="center-title">个人中心</h2>
    <van-icon name="setting-o" class="setting-icon" @click="seting()" />

    <div class="profile-section">
      <div class="profile-info">
        <van-image
          round
          width="8rem"
          height="8rem"
          :src="user.image"
          class="profile-image"
        />
        <div class="profile-details" @click="toPersonalProfile">
          <span class="profile-name">{{ user.name }}</span><br><br>
          <span class="profile-phone">{{ user.phone }}</span>
        </div>
      </div>

      <div class="points-section">
        <van-badge style="text-align: left">
          <van-icon name="gem-o" />
          <span class="product-points">我的积分: <span class="da">{{ user.score }}</span> 分</span>
          <el-button size="small" class="refresh-btn" @click="findUserById">刷新积分</el-button>
        </van-badge>
      </div>
    </div>

    <div class="order-section">
      <h3>我的订单</h3>
      <van-grid :column-num="4">
        <van-grid-item @click="toOrder" icon="shopping-cart-o" text="待支付"></van-grid-item>
        <van-grid-item @click="toOrder" icon="clock-o" text="待发货"></van-grid-item>
        <van-grid-item @click="toOrder" icon="logistics" text="待收货"></van-grid-item>
        <van-grid-item @click="toOrder" icon="passed" text="已完成"></van-grid-item>
      </van-grid>
    </div>

    <div class="menu-section">
      <van-cell title="积分收支明细" @click="toMyScore()"><span> > </span></van-cell>
      <van-cell title="帮助中心" to="/help"> ></van-cell>
      <van-cell title="意见反馈" to="feedback"><span> > </span></van-cell>
      <van-cell title="关于我们" to="me"><span> > </span></van-cell>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/show">积分商城</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="myShow">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import {Toast} from "vant";
import axios from "axios";

export default {
  data() {
    return {
      active: 2,
      userId: '',
      product: {},
      from: {},
      user: {
        name: '',
        phone: '18625821257',
        image: '',
        score: ''
      },
    };
  },
  methods: {
    toMyScore(){
      this.$router.push('/myScore')
    },
    findUserById() {
      axios.post(`/user/user/findById?id=${this.userId}`).then(res => {
        this.user = res.data.data;
      })
    },
    seting() {
      Toast('设置')
      this.$router.push({path: '/seting'})
    },
    toOrder() {
      this.$router.push({path: '/OrderPage'})
    },
    toPersonalProfile() {
      this.$router.push({path: '/personalProfile'})
    },
  },
  mounted() {
    var from = localStorage.getItem('user');
    if (from) {
      this.from = JSON.parse(from);
      this.userId = this.from.id;
      console.log("uid=", this.userId);
    }
    this.findUserById();
  },
};
</script>

<style scoped>
.my-show-container {
  padding: 10px;
  background-color: #f6e5ca;
}

.center-title {
  text-align: center;
  margin-bottom: 20px;
}

.setting-icon {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

.profile-section {
  background-color: #e65438;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
}

.profile-info {
  display: flex;
  align-items: center;
}

.profile-image {
  margin-right: 20px;
}

.profile-details {
  color: white;
  cursor: pointer;
}

.profile-name, .profile-phone {
  font-size: 20px;
}

.points-section {
  margin-top: 20px;
}

.refresh-btn {
  float: right;
  background-color: #f6e5ca;
  border: none;
  cursor: pointer;
}

.order-section {
  margin-bottom: 20px;
}

.view-all-orders {
  float: right;
  cursor: pointer;
}

.menu-section {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .setting-icon {
    margin-top: 10px;
    margin-right: 5px;
  }
}
</style>

